<template>

    <div :id="leftMove.direction === 'left' ? 'bubbling_float_left':'bubbling_float'">
        <div id="bubbling_box">
            <span :class="leftMove.direction === 'left' ? 'bubbling_triangle_left':'bubbling_triangle'"
                  :style="{'left':'leftMove'}"></span>
            <slot></slot>
        </div>
    </div>
<!--气泡框-->
</template>

<script setup>
//三角形的位置、 消息框方向控制
const leftMove = defineProps({
    left:String,
    direction:String
})



</script>

<style scoped>
img{
    width: 30px;
}

.bubbling_triangle_left{
    position: absolute;
    top: 5px;
    right: 0;
    width: 0;
    transform:  translateX(100%);
    height: 0;
    display: inline-block;
    border: 8px solid transparent;
    border-left: 8px solid #797877;
}

#bubbling_float_left {
    position: absolute;
    top: 0;
    left: -100%;
    margin-left: -100%;
    transform: translateX(-100%);
    border-radius: 0;
    padding: 10px;
    background: transparent;
}

#bubbling_float {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px;
    background: transparent;
}
#bubbling_box{
    position: absolute;
    top: 10px;
    left: 0;
    border-radius: 3px;
    display: flex;
    align-items: center;
    background: #797877;
    box-shadow: 0 0 3px #797877;
    z-index: 999;
    padding: 5px;
    animation: bubbling .3s ease-in 0s 1 forwards;
}
.bubbling_triangle{
    position: absolute;
    top: 0;
    left: 10px;
    width: 0;
    transform: translateY(-100%);
    height: 0;
    display: inline-block;
    border: 10px solid transparent;
    border-bottom: 8px solid  #797877;
}

@keyframes  bubbling{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
</style>